@import '../../css/index.less';

.banner{
    @h: 360px;
    @pd: 20px;
    @indicatorSize: 20px;
    position: relative;
    padding-bottom: @indicatorSize + @interval*2;

    .indicators{
        position: absolute;
        right: @interval;
        bottom: @interval;
        
    }

    .indicator{
        display: inline-block;
        margin-left: 6px; 
        width: @indicatorSize;
        height: @indicatorSize;
        border-radius: 100%;
        background: @bgColorSecent;
        
        &.active{
            background: @mainColor;
        }
    }

    .banner-content{
        height: @h;
    }
    
    
    .banner-item{
        padding: @pd;
        text-align: center;
        box-sizing: border-box;
    }
    
    .banner-item-content{
        overflow: hidden;
        box-sizing: border-box;
        height: 100%;
        border-radius: @radius;
        .shadow();
    }

    .img{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
}